<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@include file="/common/definition.jsp"%>
<%@ page language="java" import="java.util.*"%>
<html:html>
<tiles:insert beanName="user-definition" flush="true">
	<tiles:put name="title"> Thay đổi thông tin cá nhân </tiles:put>
	<tiles:put name="body" type="string">
		<div class="col-md-10">
				<div class="col-md-12 mainHome" style="padding-right: 40px; min-height: 550px">
					<div class="col-md-12 text-center">
						<h1>Thay đổi thông tin cá nhân</h1>
					</div>
					<s:form name="changeProfile" action="changeProfile" cssClass="form-horizontal" role="form"
						theme="simple">					
						<s:if test="errorChangeProfile == null">
						</s:if>
						<s:elseif test="errorChangeProfile == 'Đổi thông tin cá nhân thành công'">
						<div class="col-sm-offset-3 col-sm-9 paddingAlert">
							<div class="success_box" style="display: block;">
								<s:property value="errorChangeProfile" />
							</div>
						</div>
						</s:elseif>
						<s:elseif test="errorChangeProfile != null">
						<div class="col-sm-offset-3 col-sm-9 paddingAlert">
							<div class="error_box" style="display: block;">
								<s:property value="errorChangeProfile" />
							</div>
						</div>
						</s:elseif>
						<div class="col-sm-offset-3 col-sm-9 paddingAlert">
							<div class="error_box"></div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Họ</label>
							<div class="col-sm-9">
								<s:textfield name="profileModel.profileInfo.firstName" data-toggle="tooltip" 
								title="Họ có độ dài từ 1 đến 20 ký tự" cssClass="form-control" placeholder="Họ"
								value="%{#session.firstName}"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Tên</label>
							<div class="col-sm-9">
								<s:textfield name="profileModel.profileInfo.lastName" data-toggle="tooltip" 
								title="Tên có độ dài từ 1 đến 20 ký tự" cssClass="form-control" placeholder="Tên"
								value="%{#session.lastName}"/>
							</div>
						</div>
						<s:property value="#day"/>
						<div class="form-group">
							<label class="col-sm-3 control-label" for="day">Ngày</label>
							<div class="col-sm-2" style="padding-right: 0px; ">
								<select class="form-control " id="day" name="day">
									<option value="-1">&nbsp;Ngày</option>
									<s:if test="profileModel.day.equals('01')"><option value="01" selected>&nbsp;1</option></s:if>
									<s:else><option value="01">&nbsp;1</option></s:else>
									<s:if test="profileModel.day.equals('02')"><option value="02" selected>&nbsp;2</option></s:if>
									<s:else><option value="02">&nbsp;2</option></s:else>
									<s:if test="profileModel.day.equals('03')"><option value="03" selected>&nbsp;3</option></s:if>
									<s:else><option value="03">&nbsp;3</option></s:else>
									<s:if test="profileModel.day.equals('04')"><option value="04" selected>&nbsp;4</option></s:if>
									<s:else><option value="04">&nbsp;4</option></s:else>
									<s:if test="profileModel.day.equals('05')"><option value="05" selected>&nbsp;5</option></s:if>
									<s:else><option value="05">&nbsp;5</option></s:else>
									<s:if test="profileModel.day.equals('06')"><option value="06" selected>&nbsp;6</option></s:if>
									<s:else><option value="06">&nbsp;6</option></s:else>
									<s:if test="profileModel.day.equals('07')"><option value="07" selected>&nbsp;7</option></s:if>
									<s:else><option value="07">&nbsp;7</option></s:else>
									<s:if test="profileModel.day.equals('08')"><option value="08" selected>&nbsp;8</option></s:if>
									<s:else><option value="08">&nbsp;8</option></s:else>
									<s:if test="profileModel.day.equals('09')"><option value="09" selected>&nbsp;9</option></s:if>
									<s:else><option value="09">&nbsp;9</option></s:else>
									<s:if test="profileModel.day.equals('10')"><option value="10" selected>&nbsp;10</option></s:if>
									<s:else><option value="10">&nbsp;10</option></s:else>
									<s:if test="profileModel.day.equals('11')"><option value="11" selected>&nbsp;11</option></s:if>
									<s:else><option value="11">&nbsp;11</option></s:else>
									<s:if test="profileModel.day.equals('12')"><option value="12" selected>&nbsp;12</option></s:if>
									<s:else><option value="12">&nbsp;12</option></s:else>
									<s:if test="profileModel.day.equals('13')"><option value="13" selected>&nbsp;13</option></s:if>
									<s:else><option value="13">&nbsp;13</option></s:else>
									<s:if test="profileModel.day.equals('14')"><option value="14" selected>&nbsp;14</option></s:if>
									<s:else><option value="14">&nbsp;14</option></s:else>
									<s:if test="profileModel.day.equals('15')"><option value="15" selected>&nbsp;15</option></s:if>
									<s:else><option value="15">&nbsp;15</option></s:else>
									<s:if test="profileModel.day.equals('16')"><option value="16" selected>&nbsp;16</option></s:if>
									<s:else><option value="16">&nbsp;16</option></s:else>
									<s:if test="profileModel.day.equals('17')"><option value="17" selected>&nbsp;17</option></s:if>
									<s:else><option value="17">&nbsp;17</option></s:else>
									<s:if test="profileModel.day.equals('18')"><option value="18" selected>&nbsp;18</option></s:if>
									<s:else><option value="18">&nbsp;18</option></s:else>
									<s:if test="profileModel.day.equals('19')"><option value="19" selected>&nbsp;19</option></s:if>
									<s:else><option value="19">&nbsp;19</option></s:else>
									<s:if test="profileModel.day.equals('20')"><option value="20" selected>&nbsp;20</option></s:if>
									<s:else><option value="20">&nbsp;20</option></s:else>
									<s:if test="profileModel.day.equals('21')"><option value="21" selected>&nbsp;21</option></s:if>
									<s:else><option value="21">&nbsp;21</option></s:else>
									<s:if test="profileModel.day.equals('22')"><option value="22" selected>&nbsp;22</option></s:if>
									<s:else><option value="22">&nbsp;22</option></s:else>
									<s:if test="profileModel.day.equals('23')"><option value="23" selected>&nbsp;23</option></s:if>
									<s:else><option value="23">&nbsp;23</option></s:else>
									<s:if test="profileModel.day.equals('24')"><option value="24" selected>&nbsp;24</option></s:if>
									<s:else><option value="24">&nbsp;24</option></s:else>
									<s:if test="profileModel.day.equals('25')"><option value="25" selected>&nbsp;25</option></s:if>
									<s:else><option value="25">&nbsp;25</option></s:else>
									<s:if test="profileModel.day.equals('26')"><option value="26" selected>&nbsp;26</option></s:if>
									<s:else><option value="26">&nbsp;26</option></s:else>
									<s:if test="profileModel.day.equals('27')"><option value="27" selected>&nbsp;27</option></s:if>
									<s:else><option value="27">&nbsp;27</option></s:else>
									<s:if test="profileModel.day.equals('28')"><option value="28" selected>&nbsp;28</option></s:if>
									<s:else><option value="28">&nbsp;28</option></s:else>
									<s:if test="profileModel.day.equals('29')"><option value="29" selected>&nbsp;29</option></s:if>
									<s:else><option value="29">&nbsp;29</option></s:else>
									<s:if test="profileModel.day.equals('30')"><option value="30" selected>&nbsp;30</option></s:if>
									<s:else><option value="30">&nbsp;30</option></s:else>
									<s:if test="profileModel.day.equals('31')"><option value="31" selected>&nbsp;31</option></s:if>
									<s:else><option value="31">&nbsp;31</option></s:else>
									
								</select>
							</div>
							<label class="col-sm-1 control-label" for="month">Tháng</label>
							<div class="col-sm-3" style="padding-left: 0px;">
								<select class="form-control " id="month" name="month">
									<option value="-1">Tháng</option>
									<s:if test="profileModel.month.equals('00')"><option value="00" selected>&nbsp;Tháng một</option></s:if>
									<s:else><option value="00">&nbsp;Tháng một</option></s:else>
									<s:if test="profileModel.month.equals('01')"><option value="01" selected>&nbsp;Tháng hai</option></s:if>
									<s:else><option value="01">&nbsp;Tháng hai</option></s:else>
									<s:if test="profileModel.month.equals('02')"><option value="02" selected>&nbsp;Tháng ba</option></s:if>
									<s:else><option value="02">&nbsp;Tháng ba</option></s:else>
									<s:if test="profileModel.month.equals('03')"><option value="03" selected>&nbsp;Tháng tư</option></s:if>
									<s:else><option value="03">&nbsp;Tháng tư</option></s:else>
									<s:if test="profileModel.month.equals('04')"><option value="04" selected>&nbsp;Tháng năm</option></s:if>
									<s:else><option value="04">&nbsp;Tháng năm</option></s:else>
									<s:if test="profileModel.month.equals('05')"><option value="05" selected>&nbsp;Tháng sáu</option></s:if>
									<s:else><option value="05">&nbsp;Tháng sáu</option></s:else>
									<s:if test="profileModel.month.equals('06')"><option value="06" selected>&nbsp;Tháng bảy</option></s:if>
									<s:else><option value="06">&nbsp;Tháng bảy</option></s:else>
									<s:if test="profileModel.month.equals('07')"><option value="07" selected>&nbsp;Tháng tám</option></s:if>
									<s:else><option value="07">&nbsp;Tháng tám</option></s:else>
									<s:if test="profileModel.month.equals('08')"><option value="08" selected>&nbsp;Tháng chín</option></s:if>
									<s:else><option value="08">&nbsp;Tháng chín</option></s:else>
									<s:if test="profileModel.month.equals('09')"><option value="09" selected>&nbsp;Tháng mười</option></s:if>
									<s:else><option value="09">&nbsp;Tháng mười</option></s:else>
									<s:if test="profileModel.month.equals('10')"><option value="10" selected>&nbsp;Tháng mười một</option></s:if>
									<s:else><option value="10">&nbsp;Tháng mười một</option></s:else>
									<s:if test="profileModel.month.equals('11')"><option value="11" selected>&nbsp;Tháng mười hai</option></s:if>
									<s:else><option value="11">&nbsp;Tháng mười hai</option></s:else>
								</select>
							</div>
							<label class="col-sm-1 control-label">Năm</label>
							<div class="col-sm-2" style="padding-left: 0px;">
								<select name="year" id="year" tabindex="0" class="form-control ">
									<option value="-1">Năm</option>
									<option value="2013">&nbsp;2013</option>
									<option value="2012">&nbsp;2012</option>
									<option value="2011">&nbsp;2011</option>
									<option value="2010">&nbsp;2010</option>
									<option value="2009">&nbsp;2009</option>
									<option value="2008">&nbsp;2008</option>
									<option value="2007">&nbsp;2007</option>
									<option value="2006">&nbsp;2006</option>
									<option value="2005">&nbsp;2005</option>
									<option value="2004">&nbsp;2004</option>
									<option value="2003">&nbsp;2003</option>
									<option value="2002">&nbsp;2002</option>
									<option value="2001">&nbsp;2001</option>
									<option value="2000">&nbsp;2000</option>
									<option value="1999">&nbsp;1999</option>
									<option value="1998">&nbsp;1998</option>
									<option value="1997">&nbsp;1997</option>
									<option value="1996">&nbsp;1996</option>
									<option value="1995">&nbsp;1995</option>
									<option value="1994">&nbsp;1994</option>
									<option value="1993">&nbsp;1993</option>
									<option value="1992">&nbsp;1992</option>
									<option value="1991">&nbsp;1991</option>
									<option value="1990">&nbsp;1990</option>
									<option value="1989">&nbsp;1989</option>
									<option value="1988">&nbsp;1988</option>
									<option value="1987">&nbsp;1987</option>
									<option value="1986">&nbsp;1986</option>
									<option value="1985">&nbsp;1985</option>
									<option value="1984">&nbsp;1984</option>
									<option value="1983">&nbsp;1983</option>
									<option value="1982">&nbsp;1982</option>
									<option value="1981">&nbsp;1981</option>
									<option value="1980">&nbsp;1980</option>
									<option value="1979">&nbsp;1979</option>
									<option value="1978">&nbsp;1978</option>
									<option value="1977">&nbsp;1977</option>
									<option value="1976">&nbsp;1976</option>
									<option value="1975">&nbsp;1975</option>
									<option value="1974">&nbsp;1974</option>
									<option value="1973">&nbsp;1973</option>
									<option value="1972">&nbsp;1972</option>
									<option value="1971">&nbsp;1971</option>
									<option value="1970">&nbsp;1970</option>
									<option value="1969">&nbsp;1969</option>
									<option value="1968">&nbsp;1968</option>
									<option value="1967">&nbsp;1967</option>
									<option value="1966">&nbsp;1966</option>
									<option value="1965">&nbsp;1965</option>
									<option value="1964">&nbsp;1964</option>
									<option value="1963">&nbsp;1963</option>
									<option value="1962">&nbsp;1962</option>
									<option value="1961">&nbsp;1961</option>
									<option value="1960">&nbsp;1960</option>
									<option value="1959">&nbsp;1959</option>
									<option value="1958">&nbsp;1958</option>
									<option value="1957">&nbsp;1957</option>
									<option value="1956">&nbsp;1956</option>
									<option value="1955">&nbsp;1955</option>
									<option value="1954">&nbsp;1954</option>
									<option value="1953">&nbsp;1953</option>
									<option value="1952">&nbsp;1952</option>
									<option value="1951">&nbsp;1951</option>
									<option value="1950">&nbsp;1950</option>
									<option value="1949">&nbsp;1949</option>
									<option value="1948">&nbsp;1948</option>
									<option value="1947">&nbsp;1947</option>
									<option value="1946">&nbsp;1946</option>
									<option value="1945">&nbsp;1945</option>
									<option value="1944">&nbsp;1944</option>
									<option value="1943">&nbsp;1943</option>
									<option value="1942">&nbsp;1942</option>
									<option value="1941">&nbsp;1941</option>
									<option value="1940">&nbsp;1940</option>
									<option value="1939">&nbsp;1939</option>
									<option value="1938">&nbsp;1938</option>
									<option value="1937">&nbsp;1937</option>
									<option value="1936">&nbsp;1936</option>
									<option value="1935">&nbsp;1935</option>
									<option value="1934">&nbsp;1934</option>
									<option value="1933">&nbsp;1933</option>
									<option value="1932">&nbsp;1932</option>
									<option value="1931">&nbsp;1931</option>
									<option value="1930">&nbsp;1930</option>
									<option value="1929">&nbsp;1929</option>
									<option value="1928">&nbsp;1928</option>
									<option value="1927">&nbsp;1927</option>
									<option value="1926">&nbsp;1926</option>
									<option value="1925">&nbsp;1925</option>
									<option value="1924">&nbsp;1924</option>
									<option value="1923">&nbsp;1923</option>
									<option value="1922">&nbsp;1922</option>
									<option value="1921">&nbsp;1921</option>
									<option value="1920">&nbsp;1920</option>
									<option value="1919">&nbsp;1919</option>
									<option value="1918">&nbsp;1918</option>
									<option value="1917">&nbsp;1917</option>
									<option value="1916">&nbsp;1916</option>
									<option value="1915">&nbsp;1915</option>
									<option value="1914">&nbsp;1914</option>
									<option value="1913">&nbsp;1913</option>
									<option value="1912">&nbsp;1912</option>
									<option value="1911">&nbsp;1911</option>
									<option value="1910">&nbsp;1910</option>
									<option value="1909">&nbsp;1909</option>
									<option value="1908">&nbsp;1908</option>
									<option value="1907">&nbsp;1907</option>
									<option value="1906">&nbsp;1906</option>
									<option value="1905">&nbsp;1905</option>
									<option value="1904">&nbsp;1904</option>
									<option value="1903">&nbsp;1903</option>
									<option value="1902">&nbsp;1902</option>
									<option value="1901">&nbsp;1901</option>
									<option value="1900">&nbsp;1900</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label" for="sex">Giới tính</label>
							<div class="col-sm-3 ">
								<select name="sex" id="sex" tabindex="0" class="form-control ">
									<option value="-1">Male</option>
									<option value="1">Female</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Địa chỉ</label>
							<div class="col-sm-9">
								<s:textfield name="profileModel.profileInfo.address" data-toggle="tooltip" 
								title="Địa chỉ có độ dài từ 1 đến 150 ký tự"
								cssClass="form-control " placeholder="Địa chỉ" 
								value="%{#session.address}"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">Số điện thoại</label>
							<div class="col-sm-9">
								<s:textfield name="profileModel.profileInfo.phoneNumber" data-toggle="tooltip" 
								title="Số điện thoại chỉ chấp nhận là số và tối đa 14 số" 
								cssClass="form-control " placeholder="Số điện thoại" 
								value="%{#session.phoneNumber}"/>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10 text-center">
								<button type="submit" class="btn btn-primary btn-sm">Xác
									Nhận</button>
								<button type="reset" class="btn btn-default btn-sm">Nhập
									lại</button>
							</div>
						</div>
					</s:form>
					<script type="text/javascript">
					var validator = new FormValidator('changeProfile', 
					[{
						name: 'profileModel.profileInfo.firstName',  
						display: 'họ',
						rules: 'required|min_length[1]|max_length[20]'
					},{
						name: 'profileModel.profileInfo.lastName',  
						display: 'tên',
						rules: 'required|min_length[1]|max_length[20]'
					},{
						name: 'profileModel.profileInfo.address',  
						display: 'địa chỉ',
						rules: 'required|min_length[1]|max_length[50]'
					},{
						name: 'profileModel.profileInfo.phoneNumber',  
						display: 'số điện thoại',
						rules: 'required|is_natural|min_length[1]|max_length[14]'
					},{
						name: 'day',  
						display: 'ngày sinh',
						rules: 'is_natural'
					},{
						name: 'month',  
						display: 'tháng sinh',
						rules: 'is_natural'
					},{
						name: 'year',  
						display: 'năm sinh',
						rules: 'is_natural'
					}], function(errors, evt) {
								var SELECTOR_ERRORS = $('.error_box'),
								SELECTOR_SUCCESS = $('.success_box');
								
							if (errors.length > 0) {
								SELECTOR_ERRORS.empty();
								for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
									SELECTOR_ERRORS.append(errors[i].message + '<br />');
								}
								
								SELECTOR_SUCCESS.css({ display: 'none' });
								SELECTOR_ERRORS.fadeIn(200);
							} else {
								SELECTOR_ERRORS.css({ display: 'none' });
								SELECTOR_SUCCESS.fadeIn(200);
							}			
						});
					</script>
	
				</div>
		</div>
	</tiles:put>
</tiles:insert>
</html:html>
